<template>
  <ElCard class="box-card blog-article--content">
    <ArticleContent v-if="article._id" :article="article" />
    <ConmentWrite :aid="article.id" />
    <ConmentList v-if="isShowCom" :conments="article.conments" />
  </ElCard>
</template>

<script setup lang="ts">
import { ElNotification } from 'element-plus'
import { provide, ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import $http from '@/api/http'
import ArticleContent from '@/components/article/ArticleContent.vue'
import ConmentList from '@/components/commont/ConmentList.vue'
import ConmentWrite from '@/components/commont/ConmentWrite.vue'
let route = useRoute()
let router = useRouter()
let id = ref<string | string[]>('')
let article = ref<any>({})
let isShowCom = computed(() => {
  return article.value.conments?.length > 0
})
provide('getArticleById', getArticleById)
onMounted(() => {
  id.value = route?.params?.id
  getArticleById()
})
async function getArticleById() {
  try {
    let result = await $http({
      type: 'article',
      data: { id: id.value },
    })
    article.value = result.data
    console.log(article.value)
  } catch (err) {
    console.log(err)
    ElNotification({
      title: '文章获取失败',
      message: err.message,
      type: 'error',
    })
    router.push('/index')
  }
}
</script>
<style scoped lang="less">
@import url('@/assets/css/variable.less');

.blog-article--content {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

:deep(.blog-conments--write) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: @padding-space 0;

  & > h3 {
    padding: @padding-space * 2 0;
    font-size: @font-size-h * 2;
  }
}

:deep(.blog-conments--input) {
  width: 100%;
  height: 180px;
  resize: none;
}

:deep(.blog-conments--submit.el-button) {
  width: 100%;
  margin-top: @padding-space * 2;
  margin-left: 2px;
}

:deep(.blog-conments--list) {
  padding: @padding-space * 2 0;

  & > h3 {
    padding: @padding-space * 2 0;
    font-size: @font-size-h * 2;
  }
}

:deep(.blog-conments--item) {
  padding: @padding-space;
  font-size: 14px;
  line-height: 24px;
  background-color: @bg-theme-color;
  border-radius: @radius-size;
}

:deep(.blog-conments--user) {
  display: flex;
  align-items: center;
  padding: @padding-space 0;
}

:deep(.blog-conments--avatar) {
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 50%;

  & > img {
    width: auto;
    height: 24px;
  }
}

:deep(.blog-conments--nickName) {
  padding-left: @padding-space;
  color: @line-theme-color;
}

:deep(.blog-conments--content) {
  padding: 20px 0;
  overflow: hidden;
  font-size: @font-size-p;
  color: #666;
  word-break: break-word;
  word-wrap: break-word;
}

:deep(.blog-conments--date) {
  padding: @padding-space;
  text-align: right;
}
</style>
